<template>
  <div>
    <el-card shadow="never">
      <el-row>
        <el-col :span="20">
          <header-title title="潘多拉管理"></header-title>
        </el-col>
        <el-col :span="3">
          <el-button @click="add" class="button" round>新增</el-button>
        </el-col>
      </el-row>
    </el-card>
    <el-card shadow="never">
      <div>
        <el-table :data="equipments.items" style="width: 100%">
          <el-table-column prop="equipmentName" label="设备名称"></el-table-column>
          <el-table-column prop="equipmentMac" label="mac地址"></el-table-column>
          <el-table-column prop="poName" label="所属区域"></el-table-column>
          <el-table-column label="状态">
            <template slot-scope="scope">
              <p v-if="scope.row.isOnlien == 1">在线</p>
              <p v-else>离线</p>
            </template>
          </el-table-column>
          <el-table-column prop="createdAt" label="添加时间"></el-table-column>
          <el-table-column fixed="right" label="操作">
            <template slot-scope="scope">
              <el-button @click="edit(scope.row)" type="text" style="color:#3dc2c2;">编辑</el-button>
              <el-popconfirm title="确定删除吗？" @onConfirm="remove(scope.row)">
                <el-button slot="reference" type="text" style="color:#f7674a;">删除</el-button>
              </el-popconfirm>
            </template>
          </el-table-column>
          <div slot="empty"><img src="../../../assets/blank_tip_page/blank_tip_page.png" alt=""></div>
        </el-table>
        <el-pagination
          :page-size="equipments.perPage"
          :current-page="equipments.currentPage"
          :total="equipments.total"
          @current-change="changePage"
          style="margin-top: 15px;"
          background
          layout="prev, pager, next"
        ></el-pagination>
      </div>
    </el-card>
    <el-dialog title="新增" :visible.sync="addDialog" @close="close" v-if="addDialog">
      <div>
        <el-form :model="addModal" label-width="100px" :rules="rules" ref="addModal">
          <el-form-item label="所属位置：" prop="posId">
            <el-cascader
              v-model="addModal.posId"
              :options="options"
              :props="{ expandTrigger: 'hover' }"
              @change="handleChange"></el-cascader>
          </el-form-item>
          <el-form-item label="设备名称：" prop="equipmentName">
            <el-input v-model="addModal.equipmentName"></el-input>
          </el-form-item>
          <el-form-item label="设备MAC：" prop="equipmentMac">
            <el-input v-model="addModal.equipmentMac"></el-input>
          </el-form-item>
        </el-form>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="save('addModal')">保存</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import HeaderTitle from "@/components/HeaderTitle"
import store from '@/store'
export default {
  name: 'businessPublicScreen',
  components: {
     HeaderTitle
  },
  data(){
    return {
      marketId: -1,
      equipments:{
        items:[],
        perPage: 10, // 每页显示10条
        currentPage: 1, // 当前页
        total: 0,
      },

      addDialog: false,
      addModal: {
        posId: -1,
        equipmentName: '',
        equipmentMac: '',
        isEdit: false,
        equipmentId: -1,
        type: 1 // 设备类型 设备类型 0 阅客 1 潘多拉 2 公示屏
      },
      value: [],
      options: [],
       rules: {
        equipmentName: [
          { required: true, message: "请输入设备名", trigger: "change" },
        ],
        equipmentMac: [
          { required: true, message: "请输入设备MAC", trigger: "change" },
        ],
      },
    }
  },
  watch: {
    '$store.state.app.marketId'(val, oldVal){
      if (val != oldVal && oldVal > 0){
        this.getData(val, this.equipments.currentPage, this.equipments.perPage)
        this.fetchSelector(val)
      }
    }
  },
  mounted(){
    this.marketId = store.state.app.marketId
    this.getData(this.marketId, this.equipments.currentPage, this.equipments.perPage)
    this.fetchSelector(this.marketId)
  },
  methods:{
    // 获取数据
    getData(marketId, page, perPage){
      var type = this.addModal.type
      this.$store.dispatch('pandora/fetchEquipments', {marketId, type, page, perPage}).then(
        data => {
          this.equipments = data
        }
      ).catch(err => {
        console.log("views-equipment-position-index.vue fetchAreas")
      })
    },

    fetchSelector(marketId){
      this.$store.dispatch('position/fetchPositionSelector', {marketId}).then(
        data =>{
          this.options = data
        }
      ).catch(err => {
        console.log("views-equipment-position-index.vue fetchSelector", err)
      })
    },

    // 新增
    add(){
      this.addModal.isEdit = false
      this.addDialog = true
    },
    // 编辑
    edit(row){
      var pid = null;
      var aid = null;
      var posId = row.poId
      for(var i = 0; i < this.options.length; i++) {
        var items = this.options[i].children
        for (var j = 0; j < items.length; j++) {
          if(items[j].value == posId) {
            pid = this.options[i].value
            aid = items[j].value
            break
          }
        }
      }
      this.addModal.posId = [pid, aid]
      this.addModal.isEdit = true
      this.addModal.equipmentName = row.equipmentName
      this.addModal.equipmentMac = row.equipmentMac
      this.addModal.equipmentId = row.equipmentId
      this.addDialog = true
    },
    // 移除
    remove(row){
      var type = this.addModal.type
      var marketId = this.marketId
      var equipmentId = row.equipmentId
      this.$store.dispatch('pandora/deleteEquipment', {equipmentId, marketId, type}).then(
        data => {
          console.log(data)
          this.getData(this.marketId, this.equipments.currentPage, this.equipments.perPage)
        }
      ).catch(err => {
        console.log("views-equipment-position-index.vue fetchAreas")
      })
      console.log(row)
    },
    changePage(page){
      this.page = page
      this.getData(this.marketId, this.equipments.currentPage, this.equipments.perPage)
    },
    handleChange(value) {
      console.log(value)
    },
    save(addModal){
      var marketId = this.marketId
      var posId = this.addModal.posId[1]
      var equipmentType = 0
      var equipmentName = this.addModal.equipmentName
      var equipmentMac = this.addModal.equipmentMac
      var type = this.addModal.type
this.$refs[addModal].validate(valid => {
        if (valid) {
      if(!this.addModal.isEdit){
      this.$store.dispatch('pandora/addNewEquipment', {marketId, posId, equipmentType, equipmentName, equipmentMac, type}).then(
        data =>{
          this.getData(this.marketId, this.equipments.currentPage, this.equipments.perPage)
        }
      ).catch(err => {
        console.log("views-equipment-pandora-index.vue save", err)
      })
      }else if(this.addModal.isEdit){
        var equipmentId = this.addModal.equipmentId
        this.$store.dispatch('pandora/editEquipment', {equipmentId, marketId, posId, equipmentType, equipmentName, equipmentMac, type}).then(
        data =>{
          this.getData(this.marketId, this.equipments.currentPage, this.equipments.perPage)
        }
      ).catch(err => {
        console.log("views-equipment-pandora-index.vue save", err)
      })
      }
      this.addDialog = false
        } else {
          this.$message.error("有必填项未填");
          return false;
        }
      });
    },
    close(){
      this.clear()
    },
    clear(){
      this.addModal.posId= -1,
      this.addModal.equipmentName=""
      this.addModal.equipmentMac=""
      this.addModal.equipmentId = -1
    }
  }
}
</script>

<style lang="scss" scoped>
  /deep/ .el-table__empty-text{
    width: 100%;
  }
.button {
  background: #64d9d6;
  color: #fff;
  margin-left: 40px;
}
</style>
